<script setup>
const profile = ref({
  avatar: '/avatar.jpg',
  name: '博主名称',
  description: '个人简介和座右铭...',
  social: {
    github: 'https://github.com/',
    twitter: 'https://twitter.com/',
    email: 'example@email.com'
  }
});
</script>

<template>
  <div class="profile-card">
    <div class="avatar">
      <img src="https://img1.baidu.com/it/u=3217838212,795208401&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500" alt="avatar">
    </div>
    <h3>{{ profile.name }}</h3>
    <p class="description">{{ profile.description }}</p>
    <div class="social-links">
      <a :href="profile.social.github" target="_blank">GitHub</a>
      <a :href="profile.social.twitter" target="_blank">Twitter</a>
      <a :href="`mailto:${profile.social.email}`">Email</a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.profile-card {
  padding: var(--space);
  background: var(--white);
  border-radius: var(--radius);
  text-align: center;

  .avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--gap);
    
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  .description {
    margin: var(--space) 0;
    font-size: 14px;
  }

  .social-links {
    display: flex;
    justify-content: center;
    gap: var(--gap);

    a {
      color: var(--primary-color);
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
